<template>
	<view class="page-view">
		<zx-nav title="发票详情" bg="#fff" fixedTop></zx-nav>
		<view class="card">
			<view class="card-hd flex align-center justify-between">
				<text>发票状态：</text>
				<text class="state" :class="[item.status == 3 ? 'text-green' : 'text-red']">{{ info.status == 1 ? '待开具' : info.status == 2 ? '撤销' : '已开具' }}</text>
			</view>
		</view>
		<view class="card">
			<view class="card-hd">订单信息</view>
			<view class="orderlist">
				<view class="order-item flex align-center justify-between" v-for="(item, index) in info.order_info">
					<view>
						<text>订单号：</text>
						<text class="orderNo">{{ item.order_no }}</text>
					</view>
					<view class="flex-sub margin-left">
						<text>订单金额：</text>
						<text class="money">{{ item.amount }}元</text>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-hd">发票信息</view>
			<view class="card-bd invoiceInfo">
				<view class="invoiceInfo-item">
					<text>发票抬头：</text>
					<text class="text-black">{{ info.name }}</text>
				</view>
				<view class="invoiceInfo-item">
					<text>税号：</text>
					<text class="text-black">{{ info.number }}</text>
				</view>
				<view class="invoiceInfo-item">
					<text>其他信息：</text>
					<text class="text-black">{{ info.info || '无' }}</text>
				</view>
				<view class="invoiceInfo-item">
					<text>发票金额：</text>
					<text class="text-red">{{ info.amount }}元</text>
				</view>
				<view class="invoiceInfo-item">
					<text>申请时间：</text>
					<text class="text-black">{{ info.created_at }}</text>
				</view>
				<view class="invoiceInfo-item">
					<text>开票时间：</text>
					<text class="text-black" v-if="info.status == 3">{{ info.updated_at }}</text>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-hd flex align-center justify-between">
				<text>发票查看/下载</text>
				<view @tap="onDown" class="flex align-center down" v-if="info.down_url">
					<image src="/static/invoice/download.png" mode="widthFix"></image>
					<text>下载保存</text>
				</view>
			</view>
			<view class="card-bd" v-if="info.down_url">
				<view class="imgbox" @tap="preview">
					<image class="img" :src="info.down_url" mode="widthFix"></image>
					<view class="mask">
						<image src="/static/invoice/search.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			info: {}
		};
	},
	components: {},
	onLoad(options) {
		this.id = options.id || '';
		this.getInvoiceDetails();
	},
	methods: {
		getInvoiceDetails() {
			this.$getAction(this.$api.invoicesList + '/' + this.id).then(da => {
				this.info = da.data;
			});
		},
		preview() {
			uni.previewImage({
				urls: [this.info.down_url],
				current: this.info.down_url
			});
		},
		onDown() {
			let that = this;
			let index = 0;
			// console.log('触发下载图片');
			// 第一步，先调用授权功能
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success: () => {
					this.downloadFile();
				},
				fail() {
					// 2、授权失败 弹框再次要求授权
					uni.showModal({
						title: '您需要授权相册权限',
						success(res) {
							// 2.1点击确认按钮就调取授权设置页面
							if (res.confirm) {
								// 2.2 开启授权设置页面
								uni.openSetting({
									success(res) {},
									fail(res) {}
								});
							}
						}
					});
				}
			});
		},
		downloadFile() {
			// 1.1 调用下载api方法
			uni.downloadFile({
				url: this.info.down_url, // 获取要下载的服务器里的图片地址
				success: res => {
					// 1.2 获取远程图片地址后,将图片地址缓存到本地
					if (res.statusCode === 200) {
						// console.log(res, '============下载后的图片地址=============>');
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath, // 把远程的图片地址及图片保存到本地
							success: function (res) {
								// 1.3保存成功后弹框提示保存成功
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								});
							},
							fail: function (res) {
								// console.log(res, '============fail=============>');
								// 1.4保存失败给用户弹框提示
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								});
								if (res.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
									return;
								}
							}
						});
					}
				},
				fail(e) {
					console.log('下载失败', e);
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.page-view {
	height: 100vh;
	background: #f4f4f4;
	padding: 28rpx 0;
}

.card {
	background: #ffffff;
	border-radius: 12rpx;
	margin: 0 28rpx;
	padding: 28rpx;

	.text-red {
		color: #ff3c47;
	}

	.text-black {
		color: #1c1c1e;
	}

	& + .card {
		margin-top: 16rpx;
	}

	.card-hd {
		font-weight: 500;
		font-size: 28rpx;
		color: #1c1c1e;

		.state {
			font-weight: 400;
			// color: #ff3c47;
		}
	}

	.invoiceInfo-item {
		margin-top: 24rpx;
		color: #848484;
	}
}

.orderlist {
	margin-top: 28rpx;

	.order-item {
		color: #848484;
		line-height: 40rpx;

		& + .order-item {
			margin-top: 20rpx;
		}

		.orderNo {
			color: #1c1c1e;
		}

		.money {
			color: #ff3c47;
		}
	}
}

.down {
	color: #ff3c47;
	font-weight: 400;

	image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 4rpx;
	}
}
.imgbox {
	width: 300rpx;
	height: 169rpx;
	position: relative;
	overflow: hidden;
	.img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		image {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}
</style>
